<template>
  <div class="talk_all_box_DYnamic">
    <ul class="talk_box_ul">
      <li v-for="(item, index, key) in StoryArr">
        <div class="item_head">
          <div class="logo_talk_item_dynamic">
            <img
              class="img_logo_talk_item_dynamic"
              :src="item.head"
              alt=""
              v-if="item.head != null"
            />
            <img
              class="img_logo_talk_item_dynamic"
              :src="default_head"
              alt=""
            />
          </div>
          <div class="item_head_name">
            <div class="name_box_item_head">
              <span class="nick_name_Dynamic">{{ item.nickname }}</span>
            </div>
            <div class="item_head_time">
              <span>{{ item.s_created_time }}</span>
              <span>发表</span>
            </div>
          </div>
        </div>
        <div class="title_talk_Dynamic">
          <div class="dy_title_title" @click="goDetails(item.s_id)">
            {{ item.s_title }}
          </div>
          <p class="dy_main_p">{{ item.s_main }}</p>
          <img
            @click="goDetails(item.s_id)"
            class="long_img_Dy"
            :src="item.s_img"
            v-if="item.s_img != null"
            alt=""
          />
          <div class="clikc_icon_dy_box" @click="goDetails(item.s_id)">
            <div class="talk_icon_dy">
              <Icon type="md-text" size="32" />评论
            </div>
            <div class="talk_icon_dy">
              <Icon
                type="md-thumbs-up"
                size="32"
                @click="goDetails(item.s_id)"
              />点赞
            </div>
          </div>
          <div class="comment_field">
            <ul class="dy_comments">
              <li
                v-for="(utem, i) in commentArr[index]"
                v-if="item.s_id == utem.sid"
              >
                <div v-if="i < ConLenArr[index]">
                  <div class="comment_top">
                    <div class="C_logo_dy">
                      <img
                        class="C_logo_dy_img"
                        :src="utem.UserH"
                        alt=""
                        v-if="utem.UserH != null"
                      />
                      <img
                        class="img_logo_talk_item_dynamic"
                        :src="default_head"
                        alt=""
                      />
                    </div>
                    <p class="user_c_dy">
                      <span class="username_c_dy">{{ utem.CommenUserID }}</span>
                      <span class="time_c_dy">{{ utem.CommenTime }}</span>
                    </p>
                  </div>
                  <p class="show_you_talk">
                    {{ utem.CommentMain }}
                  </p>
                </div>
              </li>
            </ul>
            <!-- 显示所有评论 -->
            <div
              class="showMore"
              v-if="commentArr[index].length > ConLenArr[index]"
              @click="showAllC(commentArr[index], index)"
            >
              查看全部评论<Icon type="md-arrow-dropdown" />
            </div>
            <!-- 隐藏评论 -->
            <div
              class="showMore"
              v-show="nowshow"
              @click="notshowAllC(commentArr[index], index)"
            >
              收起评论<Icon type="md-arrow-dropdown" />
            </div>
            <div>
              <div v-if="loginSuccess() == true">
                <input
                  type="text"
                  class="sengMInput"
                  :placeholder="commentInput"
                />
                <p class="send-font" @click="sendComt($event, item, index)">
                  发表
                </p>
              </div>
              <div v-if="loginSuccess() == false">
                <p>登录可发表评论！</p>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { default_head } from "common/config.js";
import { mapGetters } from "vuex";
import { getmessage } from "server/commuity.js";
import { getusermessage } from "server/commuity.js";
import { sendIndexMsg } from "server/commuity.js";
export default {
  data() {
    return {
      default_head,
      isLogin: false,
      commentInput: "请先登录后可评论",
      nowshow: false,
      num: 3,
      ConLenArr: [],
      StoryArr: [],
      commentArr: [],
      userData: [],
      id: this.$route.query.nowsend,
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 4,
      // 此处为修改后的data
      dataGoods: [],
      // 此处为所有的data
      allData: [],
    };
  },
  methods: {
    sendComt(e, item, i) {
      // 登录判断
      let _this = this;
      let nowsendM = e.currentTarget.previousElementSibling.value;

      let token = window.localStorage.getItem("front_token");
      getusermessage(token).then(function(userD) {
        let sendMsg = {
          nowCom: nowsendM,
          nowuerid: userD.uid,
          nowT: item.s_id,
        };

        sendIndexMsg(sendMsg).then(function(res) {
          _this.$Message[res.err_code]({
            background: true,
            content: res.message,
          });
          let now = _this.curentTime();
          let showbox = {
            CommenUserID: item.uid,
            CommentMain: nowsendM,
            CommenTime: now,
            UserH: item.head,
            sid: item.s_id,
          };
          _this.commentArr[i].push(showbox);
        });
      });
      e.currentTarget.parentElement.firstElementChild.value = "";
    },
    getArradd(i) {
      for (let index = 3 * (i - 1); index < i * 3; index++) {
        this.StoryArr.push(this.allData[index]);
      }
     
    },
    showAllC(item, i) {
      this.ConLenArr.splice(i, 1, item.length);
      this.nowshow = true;
    },
    changepagenew(sendsdata) {
      this.StoryArr = [];
      this.allData = [];
      this.allData = sendsdata;
      this.dataCount = sendsdata.length;
      if (sendsdata.length < this.pageSize) {
        this.StoryArr = this.allData;
      } else {
        this.StoryArr = this.allData.slice(0, this.pageSize);
      }
    },
    sendCom(item) {
      let _this = this;
      this.$show.$on("getUserLoginSuccess", this.loginSuccess);
      setTimeout(function() {
        if (_this.loginSuccess == false) {
          this.$Message["warning"]({
            background: true,
            content: "未登录,登录后可发表~",
          });
        } else {
          getusermessage(token).then(function(userData) {
            // 先行渲染
            _this.likedata.push(userData);
            _this.like_num = _this.like_num + 1;
            let likeData = {
              userid: userData.uid,
              storyId: _this.Sid,
            };
            // // 发送请求
            sendLikeuser(likeData).then(function(res) {
              _this.$Message[res.err_code]({
                background: true,
                content: res.message,
              });
            });
          });
        }
      }, 500);
    },
    notshowAllC(item, i) {
      this.ConLenArr.splice(i, 1, 3);
      this.nowshow = false;
    },
    goDetails(e) {
      // this.$router.replace("/front");
      this.$router.push({
        path: "/front/Details",
        query: {
          storId: e,
        },
      });
    },
    curentTime() {
      var now = new Date();

      var year = now.getFullYear(); //年
      var month = now.getMonth() + 1; //月
      var day = now.getDate(); //日

      var hh = now.getHours(); //时
      var mm = now.getMinutes(); //分
      var ss = now.getSeconds(); //分

      var clock = year + "-";

      if (month < 10) clock += "0";

      clock += month + "-";

      if (day < 10) clock += "0";

      clock += day + " ";

      if (hh < 10) clock += "0";

      clock += hh + ":";
      if (mm < 10) clock += "0";
      clock += mm + ":";

      if (ss < 10) clock += "0";
      clock += ss;
      return clock;
    },
    loginSuccess() {
      return this.getIsLogin;
    },
    getallMesage() {
      // 清空
      let _this = this;
      _this.StoryArr = [];
      _this.allData = [];
      // 获取数据
      getmessage().then(function(res) {
        // 分页
        _this.allData = res.data.Story;
        if (res.data.Story.length < _this.pageSize) {
          _this.StoryArr = _this.allData;
        } else {
          _this.StoryArr = _this.allData.slice(0, _this.pageSize);
        }
        // 评论归类
        for (let index = 0; index < res.data.Story.length; index++) {
          let NewArr = [];
          for (let i = 0; i < res.data.Conmen.length; i++) {
            let newArr = {
              CommenUserID: res.data.Conmen[i].nickname,
              CommentMain: res.data.Conmen[i].s_comment_main,
              CommenTime: res.data.Conmen[i].sc_time,
              UserH: res.data.Conmen[i].head,
              sid: res.data.Conmen[i].s_id,
            };
            if (res.data.Story[index].s_id == res.data.Conmen[i].s_id) {
              NewArr.push(newArr);
            }
          }
          _this.commentArr.push(NewArr);
          _this.ConLenArr.push(3);
        }
      });
    },
  },
  props: {
    Higet: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    Higet: function() {
      this.getArradd(this.Higet);
    },
  },
  created() {
    this.$show.$on("sendMsgSuccess", () => {
      this.getallMesage();
    });

    this.getallMesage();

    let _this = this;
    this.$show.$on("getUserLoginSuccess", this.loginSuccess);
    setTimeout(function() {
      if (_this.loginSuccess == true) {
        let token = window.localStorage.getItem("front_token");
        getusermessage(token).then(function(userD) {
          _this.userData = userD;
          _this.commentInput = "开心得畅所欲言吧~";
        });
      }
    }, 500);
  },
  beforeCreate() {
    let _this = this;
    if (_this.id == "ok") {
      getmessage().then(function(res) {});
    }
  },
  computed: {
    ...mapGetters(["getIsLogin", "getUserData"]),
  },
};
</script>

<style scoped>
.send-font {
  float: right;
  margin-top: 6px;
  margin-right: 3%;
  font-size: 20px;
}
.sengMInput {
  width: 80%;
  height: 36px;
  border: none;
}
.sendBTn {
  float: right;
  margin-right: 6%;
  margin-top: 2%;
  color: rgb(0, 203, 166);
  font-size: 16px;
}
.ComInp {
  width: 100%;
  height: 30px;
}
.showMore {
  width: 100%;
  font-size: 16px;
  height: 16px;
  text-align: center;
  color: #425eb2;
  margin-bottom: 20px;
}
.txt_comment-edit {
  width: 608px;
  /* border: 1px solid #dee0e1; */
  /* background: #fff; */
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  box-sizing: border-box;
  font-size: 0;
}
.is_not_login {
  width: 100%;
  overflow: hidden;
}
.show_you_talk {
  font-size: 14px;
  color: #222c37;
  padding-left: 40px;
}
.username_c_dy {
  margin-right: 10px;
}
.user_c_dy {
  float: left;
  font-size: 14px;
  line-height: 30px;
  /* color: #425eb2; */
}
.C_logo_dy_img {
  width: 100%;
  height: 100%;
}
.comment_top {
  overflow: hidden;
  height: 30px;
  width: 100%;
}
.clikc_icon_dy_box {
  margin-top: 5px;
}
.talk_box_ul {
  margin-top: 40px;
  width: 100%;
}
.item_head {
  height: 40px;
  width: 100%;
  overflow: hidden;
}
.item_head_name {
  width: calc(100% - 50px);
  float: left;
  height: 100%;
}
.nick_name_Dynamic {
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  color: #222c37;
  padding-right: 4px;
  cursor: pointer;
  float: left;
}
.item_head_time {
  margin-top: 8px;
  color: #7a8087;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
}
.name_box_item_head {
  height: 18px;
  position: relative;
}
.logo_talk_item_dynamic {
  width: 38px;
  height: 38px;
  float: left;
  margin-right: 10px;
  position: relative;
}
.img_logo_talk_item_dynamic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* border: 1px solid #dee0e1; */
  box-sizing: border-box;
}
.title_talk_Dynamic {
  width: 100%;
  padding-left: 50px;
  word-wrap: break-word;
  /* border: 1px solid;
   */
  padding-bottom: 50px;
  border-bottom: 1px solid #f8f8f9;
}
.dy_title_title {
  padding-top: 20px !important;
  padding-bottom: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 700;
  color: #222c37;
}
.dy_main_p {
  font-size: 16px;
  line-height: 28px;
  color: #222c37;
  padding-top: 14px;
  cursor: pointer;
}
.long_img_Dy {
  
  margin-top: 20px;
  width: 60%;
  /* height: 296px; */
}
.talk_icon_dy {
  float: left;
  font-size: 14px;
  line-height: 54px;
  margin-right: 28px;
  color: #7a8087;
  cursor: pointer;
}
.comment_field {
  padding: 20px;
  width: 100%;
  /* margin-left: 50px; */
  overflow: hidden;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #f8f8f9;
}
.C_logo_dy {
  width: 4%;
  height: 28px;
  float: left;
  margin-right: 10px;
  position: relative;
}
.dy_comments {
  width: 100%;
  overflow: hidden;
}
.dy_comments li {
  float: left;
  margin-bottom: 20px;
  padding: 0;
  border: none;
}
</style>
